<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>疫情分析</title>
    <script src="./echarts.min.js"></script>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="yiqin">
      <div class="box">
        <h1>疫情分析</h1>
        <div class="left">
          <div class="l-one">
            <ul class="ul">
              <li>警情警力</li>
              <li>实有人口</li>
              <li>流动人口</li>
              <li>实名制</li>
            </ul>
          </div>
          <div class="l-two">
            <span>地区:甘孜</span>
            <span>2018-06-14</span>
            <div class="one-zuo">
              <div class="yuan1">交</div>
              <div class="yuan2">刑</div>
              <div class="yuan3">无效报警2</div>
              <div class="yuan4">求助</div>
              <div class="yuan5"></div>
              <div class="yuan6">灾害事故1</div>
              <div class="yuan7"></div>
              <div class="yuan8">投诉2</div>
              <div class="yuan9"></div>
            </div>
            <div class="one-you"></div>
          </div>
          <div class="l-three">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10 至 2018-06-14</span>
            <div class="one-zuo1"></div>
            <div class="one-you1"></div>
          </div>
          <div class="l-four">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10 至 2018-06-14</span>
            <div class="one-zuo2"></div>
            <div class="one-you2">
              <p class="p1">今日舆情总数</p>
              <p class="p2">54</p>
              <p class="shang">
                环比<img src="./图片素材/iconup.png" alt="" />2%
              </p>
              <p class="p3">本周舆情总数</p>
              <p class="p4">54</p>
              <p class="shang">
                环比<img src="./图片素材/icondown.png" alt="" />2%
              </p>
              <p class="p5">本周舆情总数</p>
              <p class="p6">4</p>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="c-topl">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10</span>
            <div class="two-zuo1">
              <p class="w1">今日舆情总数</p>
              <p class="w2">54</p>
              <p class="w3">环比<img src="./图片素材/iconup.png" alt="" />2%</p>
            </div>
            <div class="two-zuo2">
              <p class="w1">今日舆情总数</p>
              <p class="w2" style="color: rgb(4, 192, 255)">54</p>
              <p class="w3">
                环比<img src="./图片素材/icondown.png" alt="" />2%
              </p>
            </div>
            <div class="two-zuo3">
              <p class="w1">今日舆情总数</p>
              <p class="w2" style="color: yellow">4</p>
              <p class="w3">环比<img src="./图片素材/iconup.png" alt="" />2%</p>
            </div>
            <div class="two-zuo4">
              <p class="w1">今日舆情总数</p>
              <p class="w2">54</p>
              <p class="w3">
                环比<img src="./图片素材/icondown.png" alt="" />2%
              </p>
            </div>
          </div>
          <div class="c-topr">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10</span>
            <div class="two-you"></div>
          </div>
          <div class="c-butt">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10 至 2018-06-14</span>
            <div class="two-but"></div>
            <div class="one-you2">
              <p class="w" style="color: #fff">今日舆情总数</p>
              <p class="w2">54</p>
              <p class="w3">环比<img src="./图片素材/iconup.png" alt="" />2%</p>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="r-top">
            <ul class="li1">
              <li>疫情</li>
              <li>交易</li>
              <li>分析报告</li>
              <li>返回</li>
            </ul>
          </div>
          <div class="r-one">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10 至 2018-06-14</span>
            <div class="r-one1"></div>
          </div>
          <div class="r-two">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10 至 2018-06-14</span>
            <div class="r-two1"></div>
          </div>
          <div class="r-three">
            <span>状态:已调节</span>
            <span>时间段 : 2018-06-10 至 2018-06-14</span>
            <div class="r-three1"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var oneyou = echarts.init(document.querySelector(".one-you"));
    var option = {
      title: {},
      tooltip: {
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        top: "10%",
        left: "10%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        axisLabel: {
          color: "#02376e",
        },
        splitLine: {
          show: false, // 显示隐藏 ture false
        },
      },
      yAxis: {
        type: "category",
        data: ["微博", "网站", "新闻", "贴吧", "论坛"],
        axisLabel: {
          color: "skyblue",
        },
      },
      series: [
        {
          type: "bar",
          data: [18203, 23489, 29034, 104970, 131744],
          itemStyle: {
            normal: {
              //   barBorderRadius: [0, 20, 20, 0], // 柱状图圆角
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  // 柱状图渐变色
                  offset: 0,
                  color: "#1facb1",
                },
                {
                  offset: 1,
                  color: "#9ec283",
                },
              ]),
            },
          },
        },
      ],
    };
    oneyou.setOption(option);

    var oneyou1 = echarts.init(document.querySelector(".one-you1"));
    var option = {
      title: {},
      tooltip: {
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        top: "10%",
        left: "10%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        axisLabel: {
          color: "#02376e",
        },
        splitLine: {
          show: false, // 显示隐藏 ture false
        },
      },
      yAxis: {
        type: "category",
        data: ["微博", "网站", "新闻", "贴吧", "论坛"],
        axisLabel: {
          color: "skyblue",
        },
      },
      series: [
        {
          type: "bar",
          data: [18203, 23489, 29034, 104970, 131744],
          itemStyle: {
            normal: {
              //   barBorderRadius: [0, 20, 20, 0], // 柱状图圆角
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  // 柱状图渐变色
                  offset: 0,
                  color: "#1facb1",
                },
                {
                  offset: 1,
                  color: "#9ec283",
                },
              ]),
            },
          },
        },
      ],
    };
    oneyou1.setOption(option);

    var dom = document.querySelector(".one-zuo1");
    var myChart = echarts.init(dom, null, {
      renderer: "canvas",
      useDirtyRect: false,
    });
    var app = {};
    var option;
    const data1 = [
      [5000, 10000, 6785.71],
      [4000, 10000, 6825],
      [3000, 6500, 4463.33],
      [2500, 5600, 3793.83],
      [2000, 4000, 3060],
      [2000, 4000, 3222.33],
      [2500, 4000, 3133.33],
      [1800, 4000, 3100],
    ];
    const cities = [
      "北京",
      "上海",
      "深圳",
      "广州",
      "苏州",
      "杭州",
      "南京",
      "福州",
    ];
    const barHeight = 50;
    option = {
      title: {},
      legend: {
        show: true,
        top: "bottom",
        data: ["Range", "Average"],
        color: "#7ecdf2",
      },
      grid: {
        top: 100,
      },
      angleAxis: {
        type: "category",
        data: cities,
      },
      tooltip: {
        show: true,
        formatter: function (params) {
          const id = params.dataIndex;
          return (
            cities[id] +
            "<br>Lowest：" +
            data[id][0] +
            "<br>Highest：" +
            data[id][1] +
            "<br>Average：" +
            data[id][2]
          );
        },
      },
      radiusAxis: {},
      polar: {},
      series: [
        {
          type: "bar",
          itemStyle: {
            color: "transparent",
          },
          data: data1.map(function (d) {
            return d[0];
          }),
          coordinateSystem: "polar",
          stack: "Min Max",
          silent: true,
        },
        {
          type: "bar",
          data: data1.map(function (d) {
            return d[1] - d[0];
          }),
          itemStyle: {
            color: "#7ecef3",
          },
          coordinateSystem: "polar",
          stack: "Min Max",
        },
        {
          type: "bar",
          itemStyle: {
            color: "transparent",
          },
          data: data1.map(function (d) {
            return d[2] - barHeight;
          }),
          coordinateSystem: "polar",
          stack: "Average",
          silent: true,
          z: 10,
        },
        {
          type: "bar",
          data: data1.map(function (d) {
            return barHeight * 2;
          }),
          itemStyle: {
            color: "transparent",
          },
          coordinateSystem: "polar",
          stack: "Average",
          barGap: "-100%",
          z: 10,
        },
      ],
    };
    if (option && typeof option === "object") {
      myChart.setOption(option);
    }
    window.addEventListener("resize", myChart.resize);

    //疫情环
    var dom = document.querySelector(".one-zuo2");
    var myChart = echarts.init(dom, null, {
      renderer: "canvas",
      useDirtyRect: false,
    });
    var app = {};
    var option;
    const data = [
      [
        [28604, 77, 17069, "Australia", 1990],
        [31163, 77.4, 22440, "Canada", 1990],
        [1516, 68, 1154773, "China", 1990],
        [13670, 74.7, 1203382, "Cuba", 1990],
        [28599, 75, 493385, "Finland", 1990],
        [29476, 77.1, 53299, "France", 1990],
        [31476, 75.4, 78237, "Germany", 1990],
        [28666, 78.1, 233330, "Iceland", 1990],
        [1777, 57.7, 871776, "India", 1990],
        [29550, 79.1, 149285, "Japan", 1990],
        [2076, 67.9, 2033354, "North Korea", 1990],
        [12087, 72, 42954, "South Korea", 1990],
        [24021, 75.4, 3566634, "New Zealand", 1990],
        [43296, 76.8, 4376665, "Norway", 1990],
        [10088, 70.8, 35258, "Poland", 1990],
        [19349, 69.6, 14768552, "Russia", 1990],
        [10670, 67.3, 5394605, "Turkey", 1990],
        [26424, 75.7, 57110117, "United Kingdom", 1990],
        [37062, 75.4, 252847810, "United States", 1990],
      ],
      [
        [44056, 81.8, 239673, "Australia", 2015],
        [43294, 81.7, 359327, "Canada", 2015],
        [13334, 76.9, 137628943, "China", 2015],
        [21291, 78.5, 113862, "Cuba", 2015],
        [38923, 80.8, 55037, "Finland", 2015],
        [37599, 81.9, 643945, "France", 2015],
        [44053, 81.1, 806845, "Germany", 2015],
        [42182, 82.8, 3222294, "Iceland", 2015],
        [5903, 66.8, 13110527, "India", 2015],
        [36162, 83.5, 1265481, "Japan", 2015],
        [1390, 71.4, 251557, "North Korea", 2015],
        [34644, 80.7, 50222939, "South Korea", 2015],
        [34186, 80.6, 45286, "New Zealand", 2015],
        [64304, 81.6, 52107, "Norway", 2015],
        [24787, 77.3, 386194, "Poland", 2015],
        [23038, 73.13, 1436918, "Russia", 2015],
        [19360, 76.5, 786630, "Turkey", 2015],
        [38225, 81.4, 647110, "United Kingdom", 2015],
        [53354, 79.1, 3217631, "United States", 2015],
      ],
    ];
    option = {
      backgroundColor: new echarts.graphic.RadialGradient(0, 0, 0, [
        {
          offset: 0,
          color: "#f7f8fa",
        },
        {
          offset: 1,
          color: "#cdd0d5",
        },
      ]),
      title: {},
      legend: {
        right: "10%",
        top: "3%",
        data: ["1990", "2015"],
        textStyle: {
          color: "#C4E5FA", // 文字颜色
        },
      },
      grid: {
        top: 20,
        bottom: 20,
      },
      xAxis: {
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        axisLabel: {
          textStyle: {
            color: "skyblue", //更改坐标轴文字颜色
          },
        },
        splitLine: {
          // 网格线
          lineStyle: {
            // 网格线样式
            color: "rgb(3, 54, 109,0.7)",
          },
        },
        axisLine: {
          // 坐标轴
          lineStyle: {
            // 坐标轴样式
            color: "skyblue",
          },
        },
      },
      yAxis: {
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        scale: true,
        axisLine: {
          // 坐标轴
          lineStyle: {
            // 坐标轴样式
            color: "skyblue",
          },
        },
        axisLabel: {
          textStyle: {
            color: "skyblue", //更改坐标轴文字颜色
          },
        },
        splitLine: {
          // 网格线
          lineStyle: {
            // 网格线样式
            color: "rgb(3, 54, 109,0.7)",
          },
        },
      },
      series: [
        {
          name: "1990",
          data: data[0],
          type: "scatter",
          symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(120, 36, 50, 0.5)",
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: "rgb(251, 118, 123)",
              },
              {
                offset: 1,
                color: "rgb(204, 46, 72)",
              },
            ]),
          },
        },
        {
          name: "2015",
          data: data[1],
          type: "scatter",
          symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(25, 100, 150, 0.5)",
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: "rgb(129, 227, 238)",
              },
              {
                offset: 1,
                color: "rgb(25, 183, 207)",
              },
            ]),
          },
        },
      ],
    };
    if (option && typeof option === "object") {
      myChart.setOption(option);
    }
    window.addEventListener("resize", myChart.resize);

    var two = echarts.init(document.querySelector(".two-but"));
    var option = {
      grid: {
        top: 20,
        bottom: 20,
      },
      legend: {
        data: ["2017年", "2018年", "同比增速"],
        textStyle: {
          color: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: "{value} ml",
          },
        },
        {
          type: "value",
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: "{value} °C",
          },
        },
      ],
      series: [
        {
          name: "2017年",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + " ml";
            },
          },
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
          itemStyle: {
            normal: {
              //   barBorderRadius: [0, 20, 20, 0], // 柱状图圆角
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  // 柱状图渐变色
                  offset: 0,
                  color: "#00e5f7",
                },
                {
                  offset: 1,
                  color: "#02387b",
                },
              ]),
            },
          },
        },
        {
          name: "2018年",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + " ml";
            },
          },
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
        },
        {
          name: "同比增速",
          type: "line",
          yAxisIndex: 1,
          itemStyle: {
            color: "yellow",
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + " °C";
            },
          },
          data: [
            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
          ],
        },
      ],
    };
    two.setOption(option);

    var myChart = echarts.init(document.querySelector(".r-one1"));
    var option = {
      legend: {
        show: false,
      },
      toolbox: {},
      series: [
        {
          type: "pie",
          radius: [10, 50],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: [
            {
              value: 4,
              name: "涉蒙",
              label: {
                textStyle: {
                  color: "#5470c6",
                },
              },
            },
            {
              value: 38,
              name: "涉军",
              label: {
                textStyle: {
                  color: "#91cc75",
                },
              },
            },
            {
              value: 32,
              name: "涉疆",
              label: {
                textStyle: {
                  color: "#fac858",
                },
              },
            },
            {
              value: 30,
              name: "涉恐",
              label: {
                textStyle: {
                  color: "#ee6666",
                },
              },
            },
            {
              value: 28,
              name: "涉藏",
              label: {
                textStyle: {
                  color: "#73c0de",
                },
              },
            },
            {
              value: 26,
              name: "涉稳",
              label: {
                textStyle: {
                  color: "#40b27d",
                },
              },
            },
            {
              value: 22,
              name: "涉警",
              label: {
                textStyle: {
                  color: "#fe9059",
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);

    var myChart = echarts.init(document.querySelector(".r-two1"));
    var option = {
      grid: {
        top: 20,
        bottom: 20,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["6-08", "6-09", "6-10", "6-11", "6-12", "6-13", "6-14"],
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
      },
      series: [
        {
          data: [120, 140, 110, 140, 100, 240, 210],
          type: "line",
          itemStyle: {
            color: "#57ae87",
          },
          areaStyle: {
            color: "#57ae87",
          },
        },
      ],
    };
    myChart.setOption(option);

    //最后一个圆形图
    var myChart = echarts.init(document.querySelector(".r-three1"));
    var option = {
      title: {},
      tooltip: {
        trigger: "item",
      },
      legend: {
        left: "center",
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            {
              value: 100,
              name: "境外",
              itemStyle: {
                color: "#00f1fc",
              },
              label: {
                textStyle: {
                  color: "#00f1fc",
                },
              },
            },
            {
              value: 90,
              name: "境内",
              itemStyle: {
                color: "#00b7ee",
              },
              label: {
                textStyle: {
                  color: "#00b7ee",
                },
              },
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  </script>
</html>
